<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <!-- <link rel="stylesheet" href="./destop.css"> -->
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        header {
            width: 100%;
            display: flex;
            height: 72px;
            background-color: white;
            font-size: 16px;
            position: fixed;
            /* top: 0; */
            border-bottom: 1px solid rgb(218, 218, 218);
            z-index: 10;
        }

        .header_left {
            width: 50%;
            font-weight: bolder;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            padding-right: 100px;
        }

        .header_left span:hover {
            cursor: pointer;
        }

        .header_left img {
            width: 40px;
            height: 40px;

        }

        .header_menu span {
            font-size: 25px;
            width: 40px;
            height: 40px;
        }

        .header_right {
            padding-right: 80px;
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .header_right span {
            font-size: 22px;
        }

        .header_right span:hover {
            cursor: pointer;
        }

        .header_right input {
            width: 260px;
            height: 40px;
            text-indent: 0;
            /* height: 100%; */
            background-color: transparent;
            padding-left: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            /* border-style: none; */
            border: 1px solid gray;
            background-color: white;
        }


        .search {
            display: flex;
            justify-content: left;
            align-items: center;
            /* border-collapse: collapse; */
        }

        .header_right .search_a {
            display: block;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            width: 40px;
            height: 40px;
            border: 1px solid gray;
            border-left: 0;
        }

        .main {
            margin-top: 72px;
        }

        .img {
            width: 100%;
            height: 100%;
        }

        .img img {
            width: 100%;
            height: 100%;
        }
    </style>
    <style>
        body,
        html {
            overflow: auto
        }

        .layui-carousel {
            display: block;
            margin-top: 72px;
            width: 100%;
            height: 640px !important;
        }

        .layui-carousel:hover {
            cursor: pointer;
        }

        .layui-carousel img {
            /* background: url(./images/1-T2.jpg); */
            width: 100%;
            height: 100%;

        }

        .layui-carousel-arrow {
            display: none\9;
            opacity: 0;
            position: absolute;
            left: 500px;
            top: 610px;
            margin-top: -18px;
            width: 36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            font-size: 20px;
            border: 0;
            /* border-radius: 50%; */
            background-color: transparent;
            color: #fff;
            -webkit-transition-duration: .3s;
            transition-duration: .3s;
            cursor: pointer;
        }

        .layui-carousel-arrow:hover {
            background-color: transparent;
        }

        .layui-carousel-ind ul {
            display: inline-block;
            padding: 5px;
            background-color: transparent;
            border-radius: 10px;
            -webkit-transition-duration: .3s;
            transition-duration: .3s;
        }

        .layui-carousel-ind ul:hover {
            background-color: transparent;
        }

        .layui-carousel[lay-arrow=always] .layui-carousel-arrow {
            opacity: 1;
            left: 200px;
        }

        .layui-carousel[lay-arrow=always] .layui-carousel-arrow {
            opacity: 1;
            left: 40%;
        }

        .layui-carousel:hover .layui-carousel-arrow[lay-type=add],
        .layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add] {
            right: 40%;
        }

        .user {
            position: relative;
            /* overflow: hidden; */
        }

        .info {
            position: absolute;
            top: 22px;
            right: 0;

            width: 180px;
            /* height: 60px; */
            background-color: white;
            font-size: 16px;
            padding: 30px;
            z-index: 10;
            display: none;
        }

        .info span {
            font-size: 16px;
        }

        .info p {
            font-size: 16px;
        }

        .user:hover .info {
            display: block;

        }
    </style>
</head>

<body>
    <header>
        <div class="header_left">
            <a href="index.html"><img src="./images/favicon.vnd.microsoft.ico" alt=""></a>
            <span class="women">女装</span>
            <span class="men">男装</span>
            <span class="child">童装</span>
            <span class="infant">婴幼儿装</span>
        </div>
        <div class="header_right">
            <div class="search">
                <input type="text" placeholder="站内搜索">
                <span class="iconfont search_a">&#xe651;</span>

            </div>
            <span class="iconfont store">&#xe62f;</span>
            <span class="iconfont user">&#xe638;
                <div class="info">
                    <div class="zh"> <span class="my_account nickname">我的账户</span></div>
                    <div class="text">
                        <p class="exit">退出</p>
                    </div>

                </div>
            </span>
            <span class="iconfont fav">&#xe6de;</span>
            <span class="iconfont cart">&#xe631;</span>
        </div>
    </header>
    <!-- 轮播图 -->
    <div class="layui-carousel" id="test1">
        <div carousel-item class="banner">
            <div><img src="./images/1-T2.jpg" alt=""></div>
            <div><img src="./images/1-T3.jpg" alt=""></div>
            <div><img src="./images/1-T4.jpg" alt=""></div>
            <div><img src="./images/3-T1.jpg" alt=""></div> -->
            <!-- <div>条目5</div>-->
        </div>
    <!-- </div> 

    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d498c673c14fac077c37869cd82e38a9.jpg?w=2452&h=920" alt="">
</body>
<!-- 引入 layui.js -->
<script src="./layui/layui.js"></script>
<script src="./common.js"></script>
<script>
    // 判断登录与否决定.info的显示与否
    if (getCookie("nickname")) {
        // console.log(111);
        // document.querySelector(".info").style.display="block"
    } else {
        // console.log(222);
        document.querySelector(".info").style.display = "none"
    }
    document.querySelector(".user").onclick = function () {
        location.href = "login.html"
    }
    document.querySelector(".info span").onclick = function (e) {
        location.href = "info.html";
        e.stopPropagation(); //阻止冒泡
    }
    document.querySelector(".exit").onclick = function (e) {
        console.log(111);
        setCookie("nickname", "", -1);
        e.stopPropagation(); //阻止冒泡
    }
    // 判断是否登录
    //  // 目前取出的nickname 可能是JSON格式的字符串 也可能是空
    // let userInfo=response.data;
    let nickname = getCookie("nickname") ? JSON.parse(getCookie("nickname")) : null;
    // 登录状态
    if (nickname) {
        document.querySelector(".my_account").innerHTML = `${nickname.nickname} 用户欢迎`
    } else {
        document.querySelector(".my_account").innerHTML = "没有值"
    }
    // layui轮播图引入
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1',
            width: '100%' //设置容器宽度
                ,
            arrow: 'always' //始终显示箭头
                ,
            anim: 'anim' //切换动画方式
                ,
            autoplay: 'false'
        });
    });

    // 轮播图接口

    ajax({
        url: "http://phpclub.org.cn:8080/api//system/homeSlide",
        success: function (response) {
            let html = '';
            let banner = document.querySelector(".banner");
            for (let ele in response.data) {
                // console.log(response.data[ele].imgUrl);
                html += ` <div><img src="${response.data[ele].imgUrl}" alt=""></div>`
            }
            banner.innerHTML = html;
        }

    })
</script>

</html>